<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

    <title>地址管理</title>

    <link href="../AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
    <link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">

    <link href="../css/personal.css" rel="stylesheet" type="text/css">
    <link href="../css/addstyle.css" rel="stylesheet" type="text/css">
    <link href="/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdn.bootcss.com/jquery/3.6.0/jquery.min.js"></script>
    <script src="../AmazeUI-2.4.2/assets/js/jquery.min.js" type="text/javascript"></script>
    <script src="../AmazeUI-2.4.2/assets/js/amazeui.js"></script>
</head>

<body>
<!--头 -->
<header>
    <article>
        <div class="mt-logo">
            <!--顶部导航条 -->

            <div class="am-container header">
                <ul class="message-l">
                    <div class="topMessage">
                        <div class="menu-hd">
                            <a href="/login" id="user" target="_top" class="h">亲，请登录</a>
                           <a href="/register" id="register" target="_top">免费注册</a>
                        </div>
                    </div>
                </ul>
                <ul class="message-r">
                    <div class="topMessage home">
                        <div class="menu-hd"><a href="/" target="_top" class="h">商城首页</a></div>
                    </div>
                    <div class="topMessage my-shangcheng">
                        <div class="menu-hd MyShangcheng"><a href="/information/" target="_top"><i
                                class="am-icon-user am-icon-fw"></i>个人中心</a></div>
                    </div>
                    <div class="topMessage mini-cart">
                        <div class="menu-hd"><a id="mc-menu-hd" href="/cart/index" target="_top"><i
                                class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong
                                id="J_MiniCartNum" class="h">0</strong></a></div>
                    </div>
                    <div class="topMessage favorite">
                        <div class="menu-hd"><a href="#" target="_top"><i
                                class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a></div>
                    </div>
                </ul>
            </div>
            <!--悬浮搜索框-->
            <div class="nav white">
                <div class="logoBig">
                    <li><img src="../images/logobig.png"/></li>
                </div>

                <div class="search-bar pr">
                    <a name="index_none_header_sysc" href="#"></a>
                    <form>
                        <input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索"
                               autocomplete="off">
                        <input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
                    </form>
                </div>
            </div>

            <div class="clear"></div>
        </div>
        </div>
    </article>
</header>

<div class="nav-table">
    <div class="long-title"><span class="all-goods">全部分类</span></div>
    <div class="nav-cont">
        <ul>
            <li class="index"><a href="#">首页</a></li>
            <li class="qc"><a href="#">闪购</a></li>
            <li class="qc"><a href="#">限时抢</a></li>
            <li class="qc"><a href="#">团购</a></li>
            <li class="qc last"><a href="#">大包装</a></li>
        </ul>
        <div class="nav-extra">
            <i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
            <i class="am-icon-angle-right" style="padding-left: 10px;"></i>
        </div>
    </div>
</div>
<b class="line"></b>

<div class="center">
    <div class="col-main" style="width: 1200px">
        <div class="main-wrap" style="width: 1200px">
            <div class="user-address" style="width: 1110px">
                <!--标题 -->
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">地址管理</strong> / <small>Address&nbsp;list</small>
                    </div>
                </div>
                <hr/>
                <ul class="am-avg-sm-1 am-avg-md-3 am-thumbnails">
                    <!--<li class="user-addresslist defaultAddr" th:each="addess:${addess}">-->
                    <li class="user-addresslist" th:each="addess:${addess}">
                        <input type="hidden" th:value="${addess.defaultAddr}"/>
                        <span class="new-option-r"><i class="am-icon-check-circle"></i>默认地址</span>
                        <input type="hidden" th:value="${addess.id}"/>
                        <p class="new-tit new-p-re">
                            <span class="new-txt" th:text="${addess.contactName}">小叮当</span>
                            <span class="new-txt-rd2" th:text="${addess.phone}">159****1622</span>
                        </p>
                        <div class="new-mu_l2a new-p-re">
                            <p class="new-mu_l2cw">
                                <span class="title">地址：</span>
                                <span class="province" th:text="${addess.province}">湖北</span>
                                <span class="city" th:text="${addess.city}">武汉</span>
                                <span class="dist" th:text="${addess.district}">洪山</span>
                                <span class="street" th:text="${addess.address}">雄楚大道666号(中南财经政法大学)</span>
                            </p>
                        </div>
                        <div class="new-addr-btn">
                            <button type="button" class="editAddress" style="background-color: transparent;border: none;"><i class="am-icon-edit"></i>编辑</button>
                            <span class="new-addr-bar">|</span>
                            <input name="id" type="hidden" th:value="${addess.id}"/>
                            <button class="delAddress" style="background-color: transparent;border: none;" >
                                <i class="am-icon-trash"></i>删除</button>
                        </div>
                    </li>
                </ul>
                <div class="clear"></div>
                <a class="new-abtn-type" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0}">添加新地址</a>
                <!--例子-->
                <div class="am-modal am-modal-no-btn" id="doc-modal-1">
                    <div class="add-dress">
                        <!--标题 -->
                        <div class="am-cf am-padding">
                            <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">新增地址</strong> /
                                <small>Add&nbsp;address</small>
                            </div>
                        </div>
                        <hr/>

                        <div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;">
                            <!--<form class="am-form am-form-horizontal layui-from" action="">-->
                            <form class="layui-form"  lay-filter="addressForm" >
                                <div class="layui-form-item">
                                    <label class="layui-form-label" style="width: 100px">收货人</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="contactName" lay-verify="title" autocomplete="off" placeholder="收货人" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label for="user-phone" class="layui-form-label" style="width: 100px">手机号码</label>
                                    <div class="layui-input-block">
                                        <input  class="layui-input" name="phone" id="user-phone" placeholder="手机号必填" type="email">
                                    </div>
                                </div>

                                <div class="layui-form-item" id="area-picker">
                                    <div class="layui-form-label" style="width: 100px;margin-left: 10px">网点地址</div>
                                    <div class="layui-input-inline" style="width: 200px;">
                                        <select name="province"  class="province-selector" data-value="山东省">
                                            <option value="">请选择省</option>
                                        </select>
                                    </div>
                                    <div class="layui-input-inline" style="width: 200px;">
                                        <select name="city" class="city-selector" data-value="菏泽市">
                                            <option value="">请选择市</option>
                                        </select>
                                    </div>
                                    <div class="layui-input-inline" style="width: 200px;">
                                        <select name="district" class="county-selector" data-value="">
                                            <option value="">请选择区</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="user-intro" class="layui-form-label" style="width: 100px">详细地址</label>
                                    <div class="layui-input-block">
                                        <textarea  class="layui-textarea" rows="address" name="address" id="user-intro"
                                                  placeholder="输入详细地址"></textarea>
                                        <small>100字以内写出你的详细地址...</small>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button id="saveBtn" type="button" class="layui-btn">立即提交</button>
                                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                    </div>
                                </div>
                                <!--<div class="layui-form-item">
                                    <div class="am-u-sm-9 am-u-sm-push-3">
                                        <a class="am-btn am-btn-danger">保存</a>
                                        <a href="javascript: void(0)" class="am-close am-btn am-btn-danger"
                                           data-am-modal-close>取消</a>
                                    </div>
                                </div>-->
                            </form>
                        </div>

                    </div>

                </div>

            </div>

            <script type="text/javascript">
                $(document).ready(function () {

                    $('.new-option-r').each(function() {
                        var prevInput = $(this).prev('input');
                        // 判断该input标签的值是否等于0
                        if (prevInput.val() == 0) {
                            // 如果满足条件，则在该元素的父节点div中添加新样式
                            $(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");
                        }
                    })

                    $(".new-option-r").click(function () {
                        $(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");
                        let id=$(this).next().val();
                        $.post("/information/updataMemberAddressDefaultAddr",{id:id},function () {

                        })
                    });

                    var $ww = $(window).width();
                    if ($ww > 640) {
                        $("#doc-modal-1").removeClass("am-modal am-modal-no-btn")
                    }

                })
            </script>

            <div class="clear"></div>

        </div>
        <!--底部-->
        <div class="footer">
            <div class="footer-hd">
                <p>
                    <a href="#">恒望科技</a>
                    <b>|</b>
                    <a href="#">商城首页</a>
                    <b>|</b>
                    <a href="#">支付宝</a>
                    <b>|</b>
                    <a href="#">物流</a>
                </p>
            </div>
            <div class="footer-bd">
                <p>
                    <a href="#">关于恒望</a>
                    <a href="#">合作伙伴</a>
                    <a href="#">联系我们</a>
                    <a href="#">网站地图</a>
                    <em>© 2015-2025 Hengwang.com 版权所有</em>
                </p>
            </div>
        </div>
    </div>
    <th:block th:include="informationEnd"/>
</div>
<script type="text/html" id="addressTemplate">
    <form class="am-u-md-12 layui-form"  lay-filter="addressForm01" >
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px">收货人</label>
            <div class="layui-input-block">
                <input type="text" name="contactName" lay-verify="title" autocomplete="off" placeholder="收货人" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="user-phone" class="layui-form-label" style="width: 100px">手机号码</label>
            <div class="layui-input-block">
                <input  class="layui-input" name="phone" id="user-phone" placeholder="手机号必填" type="email">
            </div>
        </div>

        <div class="layui-form-item" id="area-picker01">
            <div class="layui-form-label" style="width: 100px;margin-left: 10px">网点地址</div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="province"  class="province-selector" data-value="">
                    <option value="">请选择省</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="city" class="city-selector" data-value="">
                    <option value="">请选择市</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="district" class="county-selector" data-value="">
                    <option value="">请选择区</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="user-intro" class="layui-form-label" style="width: 100px">详细地址</label>
            <div class="layui-input-block">
                                        <textarea  class="layui-textarea" rows="address" name="address" id="user-intro"
                                                   placeholder="输入详细地址"></textarea>
                <small>100字以内写出你的详细地址...</small>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button id="saveBtn01" type="button" class="layui-btn">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>
</script>
<!--<script type="text/javascript" src="/layui01/layui.js"></script>-->
<!--<script type="text/javascript">-->
<!--    //配置插件目录-->
<!--    layui.config({-->
<!--        base: '/mods/'-->
<!--        , version: '1.0'-->
<!--    });-->
<!--    //一般直接写在一个js文件中-->
<!--    layui.use(['layer', 'form', 'layarea'], function () {-->
<!--        var layer = layui.layer-->
<!--            , form = layui.form-->
<!--            , $=layui.jquery-->
<!--            , layarea = layui.layarea;-->

<!--            layarea.render({-->
<!--                elem: '#area-picker',-->
<!--                data: {-->
<!--                    province: '广东省',-->
<!--                    city: '深圳市',-->
<!--                    county: '龙岗区',-->
<!--                },-->
<!--                change: function (res) {-->
<!--                    //选择结果-->
<!--                    console.log(res);-->
<!--                }-->
<!--            });-->


<!--    });-->
<!--</script>-->

<script src="/layui/layui.js" charset="UTF-8"></script>
<script >
    //配置插件目录
    layui.config({
        base: '/mods/'
        , version: '1.0'
    });
    layui.use(["table", "layer", "laydate", "form","upload","element","layarea"], function () {
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var form = layui.form;
        var upload = layui.upload;
        var element = layui.element;
        var layarea = layui.layarea;


        layarea.render({
            elem: '#area-picker',
            change: function (res) {
                console.log(res);
            }
        });

        $("body").on("click", "#saveBtn", function () {
            form.render()
            var data = form.val("addressForm");
            if(data.contactName==null||data.contactName === ""){
                layer.msg("收货人不能为空")
                return false;
            }if(data.phone==null||data.phone === ""){
                layer.msg("手机号不能为空")
                return false;
            }if(data.province==null||data.province === ""){
                layer.msg("省份不能为空")
                return false;
            }if(data.city==null||data.city === ""){
                layer.msg("市不能为空")
                return false;
            }if(data.district==null||data.district === ""){
                layer.msg("区不能为空")
                return false;
            }if(data.address==null||data.address === ""){
                layer.msg("详细地址不能为空")
                return false;
            }
            // var data = $('#addressForm').serialize();
            console.log(data);
            layer.confirm("点击确认新增成功",function () {
            $.post("/information/addMemberAddress", data, function () {
                    window.location.href="/information/memberAddress";
                });
            });
        });
        $("body").on("click", "#saveBtn01", function () {
            form.render()
            var data = form.val("addressForm01");
            if(data.contactName==null||data.contactName === ""){
                layer.msg("收货人不能为空")
                return false;
            }if(data.phone==null||data.phone === ""){
                layer.msg("手机号不能为空")
                return false;
            }if(data.province==null||data.province === ""){
                layer.msg("省份不能为空")
                return false;
            }if(data.city==null||data.city === ""){
                layer.msg("市不能为空")
                return false;
            }if(data.district==null||data.district === ""){
                layer.msg("区不能为空")
                return false;
            }if(data.address==null||data.address === ""){
                layer.msg("详细地址不能为空")
                return false;
            }
            console.log(data);
            layer.confirm("点击确认编辑成功",function () {
                $.post("/information/addMemberAddress", data, function () {
                    window.location.href="/information/memberAddress";
                });
            });
        });
        $.get("/selectByUsername",function (m) {
            if (m.data !=null){
                // 创建并设置带有圆角、自适应填充的用户头像
                var imgElement = $("<img>")
                    .attr("src", m.data.avatar)
                    .attr("style", "width:50px;height:50px;border-radius:50%;");
                // 把新的图片元素插入到"user"元素之前
                imgElement.insertBefore($("#user"));

                // 更新用户姓名
                $("#user").text(" "+m.data.username);
				$("#user").attr("href","/information/");
                // 删除原来的"register"元素
                $("#register").remove();
            }
        });

        $("body").on("click", ".delAddress", function () {
            var id=$(this).prev().val();
            $.post("/information/delMemberAddress",{id:id},function () {
                layer.confirm("删除成功",function () {
                    window.location.href="/information/memberAddress"
                })
            })
        })
        $("body").on("click", ".editAddress", function () {
            var id = $(this).next().next().val();
            console.log(id)
            $.get("/information/selMemberAddress", {id: id}, function (m) {
                layer.open({
                    type: 1,
                    area: ["800px", "400px"],
                    title: "编辑用户",
                    content: $("#addressTemplate").html()
                });


                console.log(m.data)
                form.val("addressForm01", m.data);

                layarea.render({
                    elem: '#area-picker01',
                    data: {
                        province: m.data.province,
                        city: m.data.city,
                        county: m.data.district,
                    },
                    change: function (res) {
                        console.log(res);
                    }
                });
            })
        })

        /*$('#saveBtn').click(function(event) {
            // 阻止默认事件
            event.preventDefault();

            // 使用 jQuery 的 serialize() 函数序列化表单数据
            var formData = $('#addressForm').serialize();
            console.log(formData)
            $.ajax({
                type: 'POST',
                url: '/information/addMemberAddress',
                data: formData,
                success: function(res) {
                    layer.msg("新增成功",function (){
                        window.location.href="/information/memberAddress";
                    })
                    // 更新你想要更新的部分
                },
                error: function(err) {
                    console.error(err);
                }
            });
        });*/
    });
</script>
</body>
</html>